<template >
  <div style="height:50px; line-height: 50px;border-bottom: 1px solid #e0d8d8;display: flex;background-image: linear-gradient(to right, #1ec2c2 ,#ffffff);overflow: hidden">
  <div style="flex: 1">
  </div>
  <div style="flex: 2;width: 200px;font-weight: bold;font-size:30px;color: #910303;text-align: center">欢迎来到仓库管理系统</div>

    <div style="flex:1;text-align: center">
      <img :src="imgUrl" style="width: 12%;
    border-radius: 50%;
    padding-right: 5px;"/>

      <!--    定义头部的下拉菜单-->
    <el-dropdown style="padding-top: 5px;">
    <span  style="height:40px;font-size:15px;border-radius:20px;line-height: 40px;width:70px;text-align:center;background-color: darksalmon">
      {{ username }}
    </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>个人信息</el-dropdown-item>
          <el-dropdown-item @click="$router.push('/')">退出系统</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  data(){
    return{
      imgUrl:require('../img/p2.jpg'),

      username:sessionStorage.getItem("user").replace(/\"/g, "")
    }
  }
}
</script>

<style scoped>

</style>